<script setup lang="ts">
import { CarryOutOutlined, SmileTwoTone, FolderOpenOutlined } from '@ant-design/icons-vue'
import type { TreeProps } from 'ant-design-vue'
import results from './data'

interface FormState {
  value: string
  theme: string
  keyword: string
}
const formState = reactive<FormState>({
  value: '',
  theme: '',
  keyword: ''
})

const showLine = ref<boolean>(true)
const showIcon = ref<boolean>(false)
const treeData = ref<TreeProps['treeData']>([
  {
    title: '湖北省',
    key: '420000',
    children: [
      {
        title: '武汉市',
        key: '420100',
        children: [
           { title: '市辖区', key: '420101' },
        //   { title: '江岸区', key: '420102' },
        //   { title: '江汉区', key: '420103' },
        //   { title: '硚口区', key: '420104' },
        //   { title: '汉阳区', key: '420105' },
        //   { title: '武昌区', key: '420106' },
        //   { title: '青山区', key: '420107' },
        //   { title: '洪山区', key: '420108' },
        //   { title: '东西湖区', key: '420109' },
        //   { title: '汉南区', key: '420113' },
        //   { title: '蔡甸区', key: '420114' },
        //   { title: '江夏区', key: '420115' },
        //   { title: '黄陂区', key: '420116' },
        //   { title: '新洲区', key: '420117' }
        ]
      },
      {
        title: '黄石市',
        key: '420200',
        children: [
          { title: '市辖区', key: '420201' },
          { title: '黄石港区', key: '420202' },
          { title: '西塞山区', key: '420203' },
          { title: '下陆区', key: '420204' },
          { title: '铁山区', key: '420205' },
          { title: '阳新县', key: '420222' },
          { title: '大冶市', key: '420281' }
        ]
      },
      {
        title: '十堰市',
        key: '420300',
        children: [
           { title: '市辖区', key: '420301' },
        ]
      },
      {
        title: '宜昌市',
        key: '420500',
        children: [
           { title: '市辖区', key: '420501' },
        ]
      },
      {
        title: '襄阳市',
        key: '420600',
        children: [
           { title: '市辖区', key: '420601' },
        ]
      },
      {
        title: '鄂州市',
        key: '420700',
        children: [
           { title: '市辖区', key: '420701' },
        ]
      },
      {
        title: '荆门市',
        key: '420800',
        children: [
          { title: '市辖区', key: '420801' },
        ]
      },
      {
        title: '孝感市',
        key: '420900',
        children: [
           { title: '市辖区', key: '420901' },
        ]
      },
      {
        title: '荆州市',
        key: '421000',
        children: [
           { title: '市辖区', key: '421001' },
        ]
      },
      {
        title: '黄冈市',
        key: '421100',
        children: [
          { title: '市辖区', key: '421101' },
        ]
      },
      {
        title: '咸宁市',
        key: '421200',
        children: [
           { title: '市辖区', key: '421201' },
        ]
      },
      {
        title: '随州市',
        key: '421300',
        children: [
         { title: '市辖区', key: '421301' },
        ]
      },
      {
        title: '恩施土家族苗族自治州',
        key: '422800',
        children: [
          { title: '市辖区', key: '422801' },
        ]
      },
    //   {
    //     title: '仙桃市',
    //     key: '429004',
    //     children: [
    //      { title: '市辖区', key: '429001' },
    //     ]
    //   },
    //   {
    //     title: '潜江市',
    //     key: '429005',
    //     children: [
    //       { title: 'leaf 1', key: '0-0-2-0' },
    //       {
    //         title: 'leaf 2',
    //         key: '0-0-2-1'
    //       }
    //     ]
    //   },
    //   {
    //     title: '天门市',
    //     key: '429006',
    //     children: [
    //       { title: 'leaf 1', key: '0-0-2-0' },
    //       {
    //         title: 'leaf 2',
    //         key: '0-0-2-1'
    //       }
    //     ]
    //   },
    //   {
    //     title: '神农架林区',
    //     key: '429021',
    //     children: [
    //       { title: 'leaf 1', key: '0-0-2-0' },
    //       {
    //         title: 'leaf 2',
    //         key: '0-0-2-1'
    //       }
    //     ]
    //   }
    ]
  }
])
const onSelect: TreeProps['onSelect'] = (selectedKeys, info) => {
  console.log('selected', selectedKeys, info)
}

const columns = [
  {
    title: '舆情事件',
    dataIndex: 'title',
    width: '20%'
  },
  {
    title: '发生时间',
    dataIndex: 'time',
    width: '20%'
  },
  {
    title: '线索数量',
    dataIndex: 'count'
  },
  {
    title:'舆情级别',
    dataIndex:'level'
  },
   {
    title:'事件来源',
    dataIndex:'source'
  },
   {
    title:'舆情专题',
    dataIndex:'subject'
  },
   {
    title:'事件详情',
    dataIndex:'detail'
  },
]
</script>

<template>
  <div>
    <a-form
      :model="formState"
      name="horizontal_login"
      layout="inline"
      autocomplete="off"
      @finish="onFinish"
      @finishFailed="onFinishFailed"
    >
      <a-form-item label="日期：" name="username">
        <a-input v-model:value="formState.date"> </a-input>
      </a-form-item>
      <a-form-item label="主题：" name="password">
        <a-input v-model:value="formState.theme"> </a-input>
      </a-form-item>
      <a-form-item label="关键词：" name="password">
        <a-input v-model:value="formState.keyword"> </a-input>
      </a-form-item>
      <a-form-item>
        <a-button type="primary" html-type="submit">搜索</a-button>
      </a-form-item>
    </a-form>
    <a-row>
      <a-col :span="5">
        <a-tree
          :show-line="showLine"
          :show-icon="showIcon"
          :default-expanded-keys="['420000']"
          :tree-data="treeData"
          :multiple="true"
          @select="onSelect"
        >
          <template #icon><carry-out-outlined /></template>
          <template #title="{ dataRef }">
            <template v-if="dataRef.key === '0-0-0-1'">
              <div>multiple line title</div>
              <div>multiple line title</div>
            </template>
            <template v-else>{{ dataRef.title }}</template>
          </template>
          <template #switcherIcon="{ dataRef, defaultIcon }">
            <FolderOpenOutlined
              v-if="
                dataRef.title.indexOf('市') > -1 ||
                dataRef.title.indexOf('省') > -1 ||
                '恩施土家族苗族自治州,神农架林区'.includes(dataRef.title)
              "
              style="color: #edaa13"
            />
            <component :is="defaultIcon" v-else />
          </template>
        </a-tree>
      </a-col>
      <a-col :span="19">
        <a-table :columns="columns" :data-source="results" :loading="loading" :pagination="false">
          <!-- <template #bodyCell="{ column, text }">
            <template v-if="column.dataIndex === 'name'">{{ text.first }} {{ text.last }}</template>
          </template> -->
        </a-table>
      </a-col>
    </a-row>
  </div>
</template>

<style lang="scss" scoped></style>
